<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width:200px;
        }
    </style>
</head>
<body>
    <form action="" >
        <input type="text" name="username">
        <br>
        <input type="text" name="password">
        <br>

        <!-- 选项内容发生改变的时候触发的事件 -->
        <input type="file" name="pic" onchange="writeFile(this)">
        <br>
        <img src="" alt="" id="logo">
    </form>
    <input type="button" value="上传文件" onclick="sendAjax()">
    <script>

        function writeFile(fileDom){
            // 文件选择器DOM对象.files  获取文件信息的集合

            //文件数据对象，js用于描述文件信息的File对象数据(文件名称、大小、格式、文件二进制数据)
            console.log(fileDom.files[0]);
            let file=fileDom.files[0];

            let logo=document.getElementById("logo");
            logo.src=window.URL.createObjectURL(file);//根据当前传入进来的文件对象数据可以创建一个图像地址
        }
/* 
        AJAX完成文件上传，需要注意:
            1.请求类型必须具有请求体（post、put）
            2.ajax的提供的参数必须是FormData构造函数创建二进制参数数据对象
            3.ajax请求时候参数以FormData实例对象作为send方法的参数进行定义 
            
            xhr的send方法如果参数接受的是FormData构造函数创建的数据作为参数时候
                无论参数值是否携带文件信息，当前的ajax的Content-Type都会被自动设置为: multipart/form-data  
            
        */


        function sendAjax(){
            let xhr=new XMLHttpRequest();
            
            xhr.open("post","/body");
            xhr.onload=function(){
               console.log(xhr.responseText);
            };
            let fd=new FormData();
            let username=document.querySelector("input[name='username']").value;
            let password=document.querySelector("input[name='password']").value;
            //普通文本数据的添加
            fd.append("username",username);
            fd.append("password",password);

            //文件对象数据
            let fileDom=document.querySelector("input[name='pic']");
            let file=fileDom.files[0];//文件对象数据信息
            fd.append("pic",file);

            //有效的携带二进制文件信息数据
            xhr.send(fd);
        }
    </script>
</body>
</html>